html,body{
    width:100%;height:100%;background: #e3e3e3;
}
body,ul,li{
    margin:0;
    padding: 0;
    list-style: none;
}
.logo{
    width: 3%;
    height: 100%;
    float: left;
}
.menu ul{
    cursor: pointer;
}
.menu ul input{
    cursor: pointer;
}
.canvas{
    cursor: pointer;
}
.mycanvas{
    width:80%;height:80%;
    border:1px solid #333;
    position:absolute;
    margin:auto auto;
    left:0;right:0;top:0;
    bottom: 0;
}
.mycanvas .menu{
    width:100%;height:40px;background:rgb(88,64,39);color:rgb(224,241,244);float: left;
}
.mycanvas .canvas{
    float: left;
}
.mycanvas .canvas canvas{
    background:white;
}

.option{
    width:100px;height:100%;
    float: left;
    position: relative;z-index: 999;
}
.color{
    width:190px!important;height:100%;
    text-align: center;line-height: 40px;
    float: left;
    position: relative;z-index: 999;
}
.lin-c{
    margin-left: 20px;
}
.color input{
    border:1px solid rgb(224,241,244);
    padding: 0;
    margin:0;
}
.option>li{
    width:100%;height:100%;
    text-align: center;line-height: 40px;
    cursor: pointer;
}
.son{
    width:100%;
    background:rgb(88,64,39);
    text-align: center;
    display: none;
}
.son li{
    border-bottom: 1px solid rgb(224,241,244);
    padding: 5px 0;
    font-size: 14px!important;
    cursor: pointer;
}
.son li:hover{
    background:#eea236;
}
.color-piece{
    float: left;
    margin-left: 10px;
    width:100px;height:100%;
}
.color-piece div:nth-child(1){
    float: left;
    width: 26px;
    height:33%;
    background: black;
    margin-top: 4px;
    cursor: pointer;
    margin-left: 5px;
}
.color-piece div:nth-child(2){
    float: left;
    width: 26px;
    height:33%;
    background: green;
    margin-top: 4px;
    cursor: pointer;
    margin-left: 5px;
}
.color-piece div:nth-child(3){
    float: left;
    width: 26px;
    height:33%;
    background: blue;
    margin-top: 4px;
    cursor: pointer;
    margin-left: 5px;
}
.color-piece div:nth-child(4){
    float: left;
    width: 26px;
    height:33%;
    background: red;
    margin-top: 4px;
    cursor: pointer;
    margin-left: 5px;
}
.color-piece div:nth-child(5){
    float: left;
    width: 26px;
    height:33%;
    background: yellow;
    margin-top: 4px;
    cursor: pointer;
    margin-left: 5px;
}
.color-piece div:nth-child(6){
    float: left;
    width: 26px;
    height:33%;
    background: #eea236;
    margin-top: 4px;
    cursor: pointer;
    margin-left: 5px;
}
.lists{
    height: 493px; width: 5%; float: left;
    background:#777;
}
.lists div:nth-child(1){
    margin-top: 20px;
}
.lists div,.lists p{
    width: 21px;
    height: 22px;
    line-height: 22px;
    margin: 5px auto;
    border: 2px dashed rgb(0,175,233);
    text-align: center;
    cursor: pointer;
}
.lists div img,.lists p img{
    width: 21px;
}
.lines-w{
    position: relative;
}
.line-weight{
    position: absolute;
    top:0;
    left: 30px;
    height:24px;
}
.line-weight li{
    float: left;width: 21px;height:22px;border: 2px dashed rgb(0,175,233);margin-bottom: 5px;
    display:none;background: #e3e3e3;cursor: pointer;
}
.line-weight li:hover{
    border: 2px dashed red;
}